<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="full-screen" content="yes" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/shijian.css" />
		<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
		<link rel="stylesheet" type="text/css" href="css/layer_mobile.css" />
		<link rel="stylesheet" type="text/css" href="css/submit_order.css" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="js/jquer_shijian.js"></script>
		<script type="text/javascript" src="js/vue1.0.js"></script>
		<script src="js/mobileSelect.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/layer_mobile.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/jquery-weui.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<title>提交订单</title>
	</head>

	<body>
		<!-- header_头部 -->
		<header>
			<p>
				<a class="choose_go_back" href="maintain-goods.html"></a>
				<i>提交订单</i>
			</p>
		</header>
		<!-- section_骨架 -->
		<section>
			<ul>
				<li class="f1"><i></i><b id="top_totalPrice"></b></li>
				<li>
					<div class="car">
						<i>车辆选择</i>
						<span class="car_d1s"><b></b><input class="car_d1" readonly="" placeholder="请选择车辆" /></span>
					</div>
				</li>
				<li>
					<div>
						<label><i>车辆识别号</i><input class="right vin" type="text" placeholder="请输入" /></label>
					</div>
				</li>
				<li class="oil_number">
					<div>
						<i>机油数量(升)</i>
						<span><b></b><em id="oil_number" class="bill-need">请选择</em></span>
					</div>
				</li>
				<li class="bill">
					<div>
						<i>是否需要发票</i>
						<span><b></b><em id="bill-need" class="bill-need">不需要</em></span>
					</div>
				</li>
			</ul>
			<p id="details" class="details"></p>
			<div class="integrals"><i>消费金</i><span><i class="integral"></i></span></div>
			<div class="totalprice"><i>总计</i><strong id="totalPrice" class="ss"></strong></div>
			<p class="details">选择上门时间请注意：当前时间在15:00之前，预约时间最迟为明天，15:00之后最迟则为后天。</p>
			<div><label><i>上门时间</i><b></b><input id="datetime-picker" class="time" type="text" placeholder="请选择上门时间" /></label></div>
			<p class="bottom"><button id="sub_order">提交订单</button></p>
		</section>
		<!-- 汽车 -->
		<div class="brand_type choice_car">
			<p class="title_top"><em class="back_f1"></em><i>选品牌</i></p>
			<div class="brand_list">
				<div id="char_nav_A" class="letter_title"><span>A</span></div>
				<div id="char_nav_B" class="letter_title"><span>B</span></div>
				<div id="char_nav_C" class="letter_title"><span>C</span></div>
				<div id="char_nav_D" class="letter_title"><span>D</span></div>
				<div id="char_nav_E" class="letter_title"><span>E</span></div>
				<div id="char_nav_F" class="letter_title"><span>F</span></div>
				<div id="char_nav_G" class="letter_title"><span>G</span></div>
				<div id="char_nav_H" class="letter_title"><span>H</span></div>
				<div id="char_nav_I" class="letter_title"><span>I</span></div>
				<div id="char_nav_J" class="letter_title"><span>J</span></div>
				<div id="char_nav_K" class="letter_title"><span>K</span></div>
				<div id="char_nav_L" class="letter_title"><span>L</span></div>
				<div id="char_nav_M" class="letter_title"><span>M</span></div>
				<div id="char_nav_N" class="letter_title"><span>N</span></div>
				<div id="char_nav_O" class="letter_title"><span>O</span></div>
				<div id="char_nav_Q" class="letter_title"><span>Q</span></div>
				<div id="char_nav_R" class="letter_title"><span>R</span></div>
				<div id="char_nav_S" class="letter_title"><span>S</span></div>
				<div id="char_nav_T" class="letter_title"><span>T</span></div>
				<div id="char_nav_W" class="letter_title"><span>W</span></div>
				<div id="char_nav_X" class="letter_title"><span>X</span></div>
				<div id="char_nav_Y" class="letter_title"><span>Y</span></div>
				<div id="char_nav_Z" class="letter_title"><span>Z</span></div>
			</div>
			<div class="letter_list">
				<ul>
					<li>
						<a href="#char_nav_A">A</a>
					</li>
					<li>
						<a href="#char_nav_B">B</a>
					</li>
					<li>
						<a href="#char_nav_C">C</a>
					</li>
					<li>
						<a href="#char_nav_D">D</a>
					</li>
					<li>
						<a href="#char_nav_F">F</a>
					</li>
					<li>
						<a href="#char_nav_G">G</a>
					</li>
					<li>
						<a href="#char_nav_H">H</a>
					</li>
					<li>
						<a href="#char_nav_J">J</a>
					</li>
					<li>
						<a href="#char_nav_K">K</a>
					</li>
					<li>
						<a href="#char_nav_L">L</a>
					</li>
					<li>
						<a href="#char_nav_M">M</a>
					</li>
					<li>
						<a href="#char_nav_N">N</a>
					</li>
					<li>
						<a href="#char_nav_O">O</a>
					</li>
					<li>
						<a href="#char_nav_Q">Q</a>
					</li>
					<li>
						<a href="#char_nav_R">R</a>
					</li>
					<li>
						<a href="#char_nav_S">S</a>
					</li>
					<li>
						<a href="#char_nav_T">T</a>
					</li>
					<li>
						<a href="#char_nav_W">W</a>
					</li>
					<li>
						<a href="#char_nav_X">X</a>
					</li>
					<li>
						<a href="#char_nav_Y">Y</a>
					</li>
					<li>
						<a href="#char_nav_Z">Z</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- brand__品牌 -->
		<div class="brand">
			<p class="title_top"><em class="back_f2"></em><i>选系列</i></p>
			<ul class="brand_lists">
			</ul>
		</div>
		<!-- series__年份 -->
		<div class="series">
			<p class="title_top"><em class="back_f3"></em><i>选年份</i></p>
			<ul class="series_lists">
			</ul>
		</div>
		<!-- displacement_排量 -->
		<div class="displacement">
			<p class="title_top"><em class="back_f4"></em><i>选排量</i></p>
			<ul class="displacement_list">
			</ul>
		</div>
		<!-- specific_car_具体车型 -->
		<div class="specific_car">
			<p class="title_top"><em class="back_f5"></em><i>选具体车型</i></p>
			<ul class="specific_car_list">
			</ul>
		</div>
	</body>

</html>
<script type="text/javascript">
	$('.f1 i').text(loca_fetch('pricename'));
	var _gv = { //全局变量
		"sellerId": loca_fetch('sjid'),
		"keepPackageId": loca_fetch('byid'),
		"userId": loca_fetch('userid'),
		"needTicket": 0, //0不需要 1需要
		"oilNumber": 0,
		"totalPrice": -1,
		"oilNumberId": -1
	}

	init();
	countTotal();
	/*初始化加载*/
	function init() {
		//选择是否需要发票
		new MobileSelect({
			trigger: '#bill-need',
			wheels: [{
				data: [{
						id: '0',
						value: '不需要'
					},
					{
						id: '1',
						value: '需要'
					}
				]
			}],
			position: [0], //初始化定位
			callback: function(indexArr, data) {
				_gv["needTicket"] = data[0].id
				countTotal();
			}
		});
		//选择机油数量
		$.post(site + "/upkeep/queryOilNumberLists", function(da) {
			var _data = [],
				_rs = da.data,
				_item;
			$.each(_rs, function(i) {
				_item = {
					"id": _rs[i].id,
					"value": _rs[i].name,
					"price": _rs[i].number
				}
				_data.push(_item);
			});
			new MobileSelect({
				trigger: '#oil_number',
				wheels: [{
					data: _data
				}],
				position: [0],
				callback: function(indexArr, data) {
					_gv["oilNumber"] = data[0].price
					_gv["oilNumberId"] = data[0].id
					countTotal();
				}
			});
		});
	}

	/*计算订单总价*/
	function countTotal() {
		$.ajax({
			type: "post",
			url: site + "/upkeep/queryOrderTotalMoney",
			dataType: 'json',
			data: {
				"sellerId": _gv["sellerId"],
				"keepPackageId": _gv["keepPackageId"],
				"userId": _gv["userId"],
				"needTicket": _gv["needTicket"],
				"oilNumber": _gv["oilNumber"]
			},
			success: function(da) {
				var totalPrice = da.data.totalPrice;
				_gv["totalPrice"] = totalPrice;
				$("#totalPrice").text(totalPrice + "元");
				$("#top_totalPrice").text(totalPrice + "元");
			}
		});
	}

	//生成订单
	$('#sub_order').on('click', function() {
		var car = $('.car_d1').val(),
			vin = $('.vin').val(),
			appointmentTime = $('.time').val();
		//计算总价
		if(car == '') {
			alerts('请选择车辆型号')
		} else if(vin == '') {
			alerts('请输入车辆识别号')
		} else if(_gv["oilNumberId"] == -1) {
			alerts('请选择机油数量')
		} else if(appointmentTime == '') {
			alerts('请选择时间')
		} else {
			var _data = {
				"sellerId": _gv["sellerId"],
				"keepPackageId": _gv["keepPackageId"],
				"userId": _gv["userId"],
				"needTicket": _gv["needTicket"],
				"car": car,
				"vin": vin,
				"oilNumberId": _gv["oilNumberId"],
				"totalPrice": _gv["totalPrice"],
				"appointmentTime": appointmentTime
			}
			$.ajax({
				type: "post",
				url: site + "/upkeep/order",
				dataType: 'json',
				data: _data,
				success: function(data) {
					if(data.code == 1) {
						loca_save('moders', data.data.morderId);
						window.location.href = 'book_successfully.html';
					} else {
						alerts(data.msg)
					}
				}
			});
		}
	})
</script>
<script>
	function s() {
		var interg = Math.floor(loca_fetch('integral') / loca_fetch('rate'))
		var ss = Math.ceil(loca_fetch('price') * interg)
		return ss
	}
	$('.integral').text(s())

	function p(s) {
		return s < 10 ? '0' + s : s;
	}
	var myDate = new Date();
	//获取当前年
	var year = myDate.getFullYear();
	//获取当前月
	var month = myDate.getMonth() + 1;
	//获取当前日
	var date = myDate.getDate();
	var h = myDate.getHours(); //获取当前小时数(0-23)
	var m = myDate.getMinutes(); //获取当前分钟数(0-59)
	var s = myDate.getSeconds();
	var now = year + '-' + p(month) + "-" + p(date) + " " + p(h) + ':' + p(m) + ":" + p(s);
	//不被软键盘顶起
	var h = $(window).height();
	$(window).resize(function() {
		if($(window).height() < h) {
			$('.bottom').hide();
		}
		if($(window).height() >= h) {
			$('.bottom').show();
		}
	});
	//消费金
	if(loca_fetch('userid') == '') {
		$('.ss').text(0)
	} else {
		$('.integral').show()
		$('.car_d1').empty()
		$.ajax({
			type: "get",
			url: site + "/user/myIntegral",
			dataType: 'json',
			data: {
				userId: loca_fetch('userid'),
				rateType: 1
			},
			success: function(data) {
				var jsons = data.data
				loca_save('rate', jsons.rates)
				loca_save('integral', jsons.experience)
				$('#details').text("*" + loca_fetch('rate') + "消费金等于1元(剩余" + loca_fetch('integral') + ")")
				var vue = new Vue({
					el: '.integrals',
					data: {
						dott: jsons
					}
				})
			}
		});
	}

	function inter() {
		var afterPrice
		var inger = Math.floor(loca_fetch('integral') / loca_fetch('rate')) // 消费金 
		if(inger >= pric) {
			afterPrice = 0.01
		} else {
			afterPrice = pric - inger
		}
		return afterPrice
	}

	//汽车选择
	$('.car').click(function() {
		$('.choice_car').show()
	})
	$.ajax({
		url: site + '/upkeep/findCarList',
		type: 'get',
		dataType: 'json',
		success: function(data) {
			$.each(data.data, function(i, val) {
				if(val.letter == 'A') {
					$('#char_nav_A').append('<div class="brand_box" data-brand=' + val.brand + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'B') {
					$('#char_nav_B').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'C') {
					$('#char_nav_C').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'D') {
					$('#char_nav_D').append('<div class="brand_box" data-brand=' + val.brand + '  data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'E') {
					$('#char_nav_E').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'F') {
					$('#char_nav_F').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'G') {
					$('#char_nav_G').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'H') {
					$('#char_nav_H').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'I') {
					$('#char_nav_I').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'J') {
					$('#char_nav_J').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'K') {
					$('#char_nav_K').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'L') {
					$('#char_nav_L').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'M') {
					$('#char_nav_M').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'N') {
					$('#char_nav_N').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'O') {
					$('#char_nav_O').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'P') {
					$('#char_nav_P').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'Q') {
					$('#char_nav_Q').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'R') {
					$('#char_nav_R').append('<div class="brand_box" data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'S') {
					$('#char_nav_S').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'T') {
					$('#char_nav_T').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'U') {
					$('#char_nav_U').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'V') {
					$('#char_nav_V').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'W') {
					$('#char_nav_W').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'X') {
					$('#char_nav_X').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'Y') {
					$('#char_nav_Y').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				} else if(val.letter == 'Z') {
					$('#char_nav_Z').append('<div class="brand_box" data-brand=' + val.brand + ' data-qcid=' + val.id + '><i>' + val.brand + '</i></div>')
				}
				if(val.brand == 'AC Schnitzer') {
					$('.brand_box').eq(0).remove()
					$('#char_nav_A').eq(0).append('<div class="brand_box" data-brand="AC Schnitzer"><i>' + val.brand + '</i></div>')
				}
			})
			$('.brand_box').on('click', function() {
				var stt = $(this).attr('data-qcid')
				var sttr = $(this).attr('data-brand')
				loca_save('brand', sttr)
				$('.brand_type').hide()
				$('.brand').show()
				$.ajax({
					type: "get",
					url: site + '/upkeep/findCarList',
					data: {
						brand: sttr
					},
					dataType: 'json',
					success: function(data) {
						$('.brand_lists').empty()
						$.each(data.data, function(i, val) {
							$('.brand_lists').append('<li data-series=' + val.series + '>' + val.series + '</li>')
						});
						$('.brand_lists li').on('click', function() {
							$('.brand').hide()
							$('.series').show()
							var series = $(this).attr('data-series')
							var serie = $(this).text()
							loca_save('series', serie)
							$.ajax({
								type: "get",
								url: site + '/upkeep/findCarList',
								data: {
									brand: loca_fetch('brand'),
									series: serie
								},
								dataType: 'json',
								success: function(data) {
									$('.series_lists').empty()
									$.each(data.data, function(i, val) {
										$('.series_lists').append('<li data-years=' + val.years + '>' + val.years + '</li>')
									});
									$('.series_lists li').on('click', function() {
										$('.series').hide()
										$('.displacement').show()
										var years = $(this).text()
										loca_save('yrars', years)
										$.ajax({
											type: "get",
											url: site + '/upkeep/findCarList',
											data: {
												brand: loca_fetch('brand'),
												series: loca_fetch('series'),
												years: years
											},
											dataType: 'json',
											success: function(data) {
												$('.displacement_list').empty()
												$.each(data.data, function(i, val) {
													$('.displacement_list').append('<li data-output=' + val.output + '>' + val.output + '</li>')
												});
												$('.displacement_list li').on('click', function() {
													$('.displacement').hide()
													$('.specific_car').show()
													var output = $(this).attr('data-output')
													loca_save('output', output)
													$.ajax({
														type: "get",
														url: site + '/upkeep/findCarList',
														data: {
															brand: loca_fetch('brand'),
															series: loca_fetch('series'),
															years: loca_fetch('yrars'),
															output: output
														},
														dataType: 'json',
														success: function(data) {
															$('.specific_car_list').empty()
															$.each(data.data, function(i, val) {
																$('.specific_car_list').append('<li>' + val.name + '</li>')
															});
															$('.specific_car_list li').on('click', function() {
																$('.specific_car').hide()
																$('.car_d1').val($(this).text())
															})
														}
													});
												})
											}
										});
									})
								}
							});
						})
					}
				});
			})
		}
	})
	$('.back_f1').on('click', function() {
		$('.choice_car').hide()
	})
	$('.back_f2').on('click', function() {
		$('.choice_car').show()
		$('.brand').hide()
	})
	$('.back_f3').on('click', function() {
		$('.series').hide()
		$('.brand').show()
	})
	$('.back_f4').on('click', function() {
		$('.displacement').hide()
		$('.series').show()
	})
	$('.back_f5').on('click', function() {
		$('.specific_car').hide()
		$('.displacement').show()
	})

	$(".time").shijian({
		startYear: '2018-03-27',
		//val: 2018,
		endYear: 2027,
		Hour: true,
		Minute: true,
		Seconds: true,
		okText: "确认",
		cancelText: '取消',
	})
</script>